<template>
  <div class="details">
    <div class="head-box">
      <div class="box-l">
        <img :src="details.brand_logo" />
      </div>
      <div class="box-r">
        <p class="p1">{{details.brand_name}}</p>
        <p class="p2">{{details.site_url}}</p>
      </div>
    </div>
    <div class="gray"></div>
    <div class="text">
     {{details.brand_desc}}
    </div>
    <div class="grays"></div>
    <div class="like">
      <p class="tit">企业药品</p>
      <ul>
        <li v-for="(item,index) in love" :key="index" @click="godetails(item.goods_id)">
          <img :src="item.goods_thumb" />
          <p class="p1">{{item.goods_name}}</p>
          <div class="qian">
            <p class="p3">{{item.price}}</p>
            <p class="p4">立即购买</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        brand_id:'',
        details:'',
        love:[],
      }
    },
    created() {
      this.brand_id=this.$route.query.brand_id
      this.getdetails()
    },
    mounted(){
     
    },
    methods: {
      // 品牌专区
      getdetails(){
        this.$get("/api/gzh_mine.php?action=brand_info", {
          uid:localStorage.getItem('uid'),
          brand_id: this.brand_id
        }).then(res => { 
          this.details = res.data
          this.love = this.details.goods_list
        }).catch(err => {

        });
      },
      // 去详情
      godetails(id){
        this.$router.push({name:'details',query: {goods_id:id}})
      },
    },
  }
</script>

<style scoped>
.details{
  width: 100%;
  border-top: 1px solid #EFEFEF;
}
.head-box{
  width: 100%;
  height:281px;
  background:rgba(255,255,255,1);
  display: flex;
  align-items: center;
}
.head-box .box-l{
  margin-left: 29px;
}
.box-l img{
  width:200px;
  /* height:203px; */
  border-radius:12px;
}
.head-box .box-r{
  margin-left: 25px;
}
.box-r .p1{
  font-size:34px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(51,51,51,1);
  line-height:30px;

}
.box-r .p2{
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(55,160,82,1);
  line-height:30px;
  margin:33px 0;
}



.gray{
  width: 100%;
  height: 10px;
  background: #F8F8F8;
}

.text{
  width:659px;
  font-size:28px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(102,102,102,1);
  line-height:36px;
  margin: 42px auto;
}

.grays{
  width: 100%;
  height: 4px;
  background: #F8F8F8;
}

.like{
  width: 100%;
}
.like .tit{
  width: 100%;
  height: 87px;
  line-height: 87px;
  padding-left: 30px;
  box-sizing: border-box;
  font-size:32px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
}
ul{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
ul li{
  width: 50%;
  height: 500px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
li img{
  width: 337px;
  height: 337px;
}
li .p1{
  font-size: 34px;
  color: #333;
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap;
}
li .p2{
  font-size: 28px;
  color: #ccc;
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top: 10px;
}
li .qian{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
li .qian .p3{
  font-size: 34px;
  color: #c94451;
}
li .qian .p3 span{
  font-size: 28px;
}
li .qian .p4{
  width: 132px;
  height: 55px;
  background: #06a255;
  font-size: 28px;
  color: #fff;
  text-align: center;
  line-height: 55px;
  border-radius: 28px;
}
</style>